<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$title}</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <style>
        * {
            margin: 0;
            padding: 0;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        html {
            font: 14px SimSun, \5B8B\4F53, serif;
            width: 100%;
            height: 100%;
        }

        body {
            height: 100%;
            width: 100%;
            background: #f0f0f0;
        }

        a {
            text-decoration: none;
        }

        img {
            border: none;
            width: 100%;
        }

        li {
            list-style: none;
        }

        .wrapper-content {
            width: 100%;
            height: 100%;
        }

        /*顶部*/
        .header_container {
            height: 20rem;
        }

        /*顶部图片*/
        .header_container img {
            z-index: 0;
        }

        /*顶部内容container*/
        .header_content_container {
            position: absolute;
            left: 10%;
            top: 5rem;
            text-align: center;
            width: 80%;
            z-index: 1;
        }

        /*两个用户头像container*/
        .user_img_container {
            position: relative;
            width: 33%;
            float: left;
        }

        /*皇冠图片和用户1的头像的父container*/
        .user_master_container {
            width: 5rem;
            height: 5rem;
            margin: 0 auto;
            position: relative;
        }

        /*皇冠图片 样式*/
        .user_master {
            width: 5rem;
            position: absolute;
            margin-left: -1.6rem;
            top: -0.7rem;
            z-index: 2;
        }

        /*用户1的头像样式*/
        .user_img {
            width: 5rem;
            height: 5rem;
            border-radius: 5rem;
            border: 0.3rem solid #fff;
            z-index: 1;
            position: relative;
            box-shadow: 0 0 4px 5px rgba(255, 255, 255, 0.42); /*垂直位置 水平位置 模糊或清晰度 宽度范围 RGB颜色值，透明度*/
            /*-moz-box-shadow: 0 2px 4px 8px rgba(255, 0, 0, 0.22);     !*兼容FF*!*/
            /*-webkit-box-shadow: 0 2px 4px 8px rgba(255, 0, 0, 0.22);*/
        }

        /*vs container*/
        .vs_img_container {
            width: 33%;
            text-align: center;
            float: left;
        }

        /*用户2的头像样式*/
        .user_img2 {
            border: 0.3rem solid #fff;
            width: 5rem;
            height: 5rem;
            border-radius: 5rem;
            position: relative;
            box-shadow: 0 0 4px 5px rgba(255, 255, 255, 0.42); /*垂直位置 水平位置 模糊或清晰度 宽度范围 RGB颜色值，透明度*/
        }

        /*vs 图片样式*/
        .vs_img {
            width: 2rem;
            height: auto;
            margin-top: 1.5rem;
        }

        /*用户1和用户2的名字样式*/
        .user_name {
            color: #454b65;
            margin: 0.3rem auto;
            text-align: center;
            font-size: 1rem;
            position: relative;
            width: 5.8rem;
            line-height: 2.0rem;
            background: rgba(255, 255, 255, 0.22);
            border-radius: 1rem;
            overflow: hidden; /*超出部分隐藏*/
            white-space: nowrap; /*不换行*/
            text-overflow: ellipsis; /*超出部分文字以...显示*/
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }

        /*用户1的名字*/
        .user_name1 {
            margin-top: 1.2rem;
        }

        /*用户1和用户2的日月升样式*/
        .user_des {
            color: #fff;
            width: 100%;
            margin-top: 0.5rem;
            text-align: center;
            font-size: 0.7rem;
        }

        /*鉴定结果container*/
        .content_container {
            padding: 1rem;
            margin-top: -2rem;
            width: 100%;
            height: auto;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            border: 0.7rem solid #fff;
            background: #FFFFFF;
            position: relative;
            border-radius: 0.5rem;
            z-index: 1;
        }

        /*鉴定结果标题container*/
        .content_header {
            height: 3rem;
            width: 100%;
            margin-top: 0.5rem;
            border-bottom: 1px solid #f5f5f5;
        }

        /*“鉴定结果”label样式*/
        .left_label {
            color: #353b52;
            font-size: 1.2rem;
            font-weight: bold;
            position: absolute;
            left: 1rem;
            line-height: 1.5rem;
        }

        /*“用户1、用户2”样式*/
        .right_label {
            color: #353b52;
            font-size: 0.8rem;
            position: absolute;
            right: 1rem;
            line-height: 1.5rem;
        }

        /*“对”的样式*/
        .right_label span {
            color: #a7a9b7;
            font-size: 0.8rem;
            padding-left: 0.3rem;
            padding-right: 0.3rem;
        }

        /*单条样式*/
        .item {
            width: 100%;
            margin-top: 1rem;
        }

        /*奖牌container*/
        .item_left {
            position: relative;
            text-align: center;
            width: 2.5rem;
            float: left;
        }

        /*奖牌图片样式*/
        .item_left img {
            width: 100%;
        }

        /*圆环部分*/
        .circle_container {
            width: 2.1rem;
            height: 2.1rem;
            border-radius: 2.1rem;
            background: #fff;
        }

        /*奖牌百分比样式*/
        .item_left_percent_value {
            text-align: center;
            width: 100%;
            color: #333333;
            font-size: 0.9rem;
            position: absolute;
            top: 0.5rem;
            font-weight: bold;
        }

        /*百分比标示样式*/
        .item_left_percent {
            text-align: center;
            width: 100%;
            color: #333333;
            font-size: 0.4rem;
            position: absolute;
            top: 1.5rem;
        }

        /*单条 右侧container*/
        .item_right {
            padding-left: 3.5rem;
            padding-top: 0.7rem;
        }

        /*头部标题和最佳图片 container*/
        .item_right_header {
            position: relative;
            margin-top: -0.2rem;
            height: 1.8rem;
        }

        /*头部标题 样式*/
        .item_right_title {
            color: #333333;
            font-size: 1.2rem;
            font-weight: bold;
            float: left;
        }

        /*描述 样式*/
        .item_right_des {
            color: #999999;
            font-size: 1rem;
            width: 100%;
            padding-top: 0.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #f5f5f5;
            height: auto;
            text-indent: 0;
            line-height: 1.8rem;
        }

        /*底部container*/
        .bottom_container {
            height: auto;
            width: 100%;
            position: relative;
        }

        /*底部背景图片 解决底部有边距的问题*/
        .bottom_container img {
            border: 0;
            vertical-align: bottom;
        }

        /*底部按钮 container*/
        .bottom_btn_container {
            width: 30%;
            position: absolute;
            bottom: 2rem;
            left: 35%;
            z-index: 1;
            text-align: center;
            vertical-align: middle;
        }

    </style>
<!--    <script src="https://static.jmlk.co/scripts/dist/jmlink.min.js"></script>-->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?11869969a3b6834ebb1d5b9f3d9c7a5f";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>
<body>
<div class="wrapper-content">
    <!--顶部 头像vs头像-->
    <div class="header_container">
        <img src="/static/identify_love/img/detail_header.png">
        <div class="header_content_container">
            <div class="user_img_container">
                <div class="user_master_container">
                    <img class="user_img" src="{$data['recodes'][0]['avatar']}">
                    <img class="user_master" src="/static/identify_love/img/detail_user_master1.png">
                </div>
                <div class="user_name user_name1">{$data['recodes'][0]['name']}</div>
                <div class="user_des">{$data['recodes'][0]['sun_moon_asc']}</div>
            </div>
            <div class="vs_img_container">
                <img class="vs_img" src="/static/identify_love/img/detail_vs.png">
            </div>
            <div class="user_img_container">
                <img class="user_img2" src="{$data['recodes'][1]['avatar']}">
                <div class="user_name">{$data['recodes'][1]['name']}</div>
                <div class="user_des">{$data['recodes'][1]['sun_moon_asc']}</div>
            </div>
        </div>
    </div>
    <!--内容列表-->
    <div class="content_container">
        <div class="content_header">
            <div class="left_label">鉴定结果</div>
            <div class="right_label">{$data['recodes'][1]['name']}<span>是</span>{$data['recodes'][0]['name']}<span>的</span></div>
        </div>

        {foreach $data['result_list1'] as $k => $v}
        <div class="item">
            <div class="item_left">
                {if condition="$k==0"}
                <img src="/static/identify_love/img/detail_item_left_img1.png">
                {else}
                <div class="circle_container" style="border: 0.25rem solid {$v.color};"></div>
                {/if}
                <div class="item_left_percent_value">{$v.score}</div>
                <div class="item_left_percent">%</div>
            </div>
            <div class="item_right">
                <div class="item_right_header">
                    <div class="item_right_title">{$v.title}</div>
                </div>
                <p class="item_right_des">
                    {$v.content}
                </p>
            </div>
        </div>
        {/foreach}
    </div>

    <!--底部按钮部分-->
    <div class="bottom_container">
        <img src="/static/identify_love/img/detail_bottom_img.png">
        <div class="bottom_btn_container">
            <a href="javascript:;" id="btn">
                <img src="/static/identify_love/img/detail_start_btn.png">
            </a>
        </div>
    </div>
</div>
<script>

    document.setTitle = function (t) {
        document.title = t;
        var i = document.createElement('iframe');
        i.src = '/favicon.ico';
        i.style.display = 'none';
        i.onload = function () {
            setTimeout(function () {
                i.remove();
            }, 0)
        };
        document.body.appendChild(i);
    };

    function actionBtn() {
        location.href = "https://www.goddessxzns.com";
    }
    // new Mlink({
    //     mlink: 'https://axelkv.mlinks.cc/ABP1',//跳转至鉴爱首页
    //     button: document.querySelector('a#btn')
    // });
    // new JMLink({
    //     jmlink: 'https://a0ue2y.jmlk.co/AA63',// 短链地址
    //     button: document.querySelector('a#btn'),
    //     plhparams: {
    //         target: 'local',
    //         link: 'identify_love?need_auth=1'
    //     }
    // });
    document.querySelector('a#btn').addEventListener('click',function(e){
        window.location = 'https://applink-zhunle.goddessxzns.com?app=zhunle&target=local&link='+encodeURIComponent('identify_love?need_auth=1');
    });

    wx.config({
            debug: false,
            appId: '{$signPackage.appId}',
            timestamp: {$signPackage.timestamp},
        nonceStr: '{$signPackage.nonceStr}',
        signature: '{$signPackage.signature}',
        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
    })
    ;
    wx.ready(function () {
        wx.onMenuShareAppMessage({
            title: '{$share_title}',
            desc: '{$share_introduction}',
            link: '{$signPackage.url}',
            imgUrl: '{$share_img}',
            type: 'link',
            dataUrl: '',
            success: function () {

            },
            cancel: function () {

            }
        });
        wx.onMenuShareTimeline({
            title: '{$share_title}',
            link: '{$signPackage.url}',
            imgUrl: '{$share_img}',
            success: function () {

            },
            cancel: function () {

            }
        });
    });
</script>
{include file="../apps/web/view/public/sensors.html" /}
</body>
</html>
